<template>
  <main class="wss-container">
    <div class="label-box-content">
      <el-row :gutter="30" type="flex">
        <el-col :span="8">
          <NewCard title="任务菜单">
            <el-menu :default-active="activeMenu">
              <!-- <el-menu-item class="typeRes">
                            <span>名称</span>
                            <span>类限</span>
                        </el-menu-item> -->
              <el-menu-item
                @click="getExpertFn(item)"
                v-for="item in titileArr"
                :key="item.value"
                :index="item.value.toString()"
              >
                <span slot="title">{{ item.name }}</span>
              </el-menu-item>

              <!-- <el-menu-item index="5">
                            <span slot="title">图文咨询</span>
                        </el-menu-item> -->
            </el-menu>
          </NewCard>
        </el-col>
        <el-col :span="8">
          <div class="corrExpert">
            <NewCard title="专家名单">
              <!-- <el-menu-item v-for="l in listNumName" :index="JSON.stringify(l.index)" :key='l.index'>
                                <span slot="title">{{l.name}}</span>
                            </el-menu-item> -->
              <!-- <el-menu-item class="addUp">
                                累计百分比：<span>{{addUp}}%</span> / 100%
                            </el-menu-item> -->
              <template>
                <div class="centerTable">
                  <div class="centerSearch">
                    <el-popover placement="bottom" width="160">
                      <el-input
                        @blur="searchExpertFn"
                        v-model="searchExpert"
                        size="mini"
                        placeholder="输入关键字搜索"
                      />
                      <el-button
                        slot="reference"
                        icon="el-icon-search"
                        circle
                      ></el-button>
                    </el-popover>
                  </div>

                  <el-table
                    @row-click="getcurrent"
                    @row-dblclick="selectExpert"
                    :data="expertList"
                    :default-sort="{ prop: 'date', order: 'descending' }"
                    :highlight-current-row="highlight"
                    :fit="fit"
                    :height="tableHeight"
                    style="width: 100%"
                    ref="table"
                  >
                    <el-table-column label="姓名" prop="name">
                    </el-table-column>
                    <el-table-column label="日标" prop="index" sortable>
                      <template slot-scope="scope">
                        <el-input
                          @blur="editExpertFn(scope.row)"
                          v-model.number="scope.row.target"
                        ></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column label="人限" prop="asLimit" sortable>
                      <template slot-scope="scope">
                        <el-input
                          @blur="editExpertFn(scope.row)"
                          v-model.number="scope.row.quota"
                        ></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column label="排序" prop="index" sortable>
                      <template slot-scope="scope">
                        <el-input
                          @blur="editExpertFn(scope.row, 'paixv')"
                          v-model.number="scope.row.sort"
                        ></el-input>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </template>
            </NewCard>
          </div>
        </el-col>
        <el-col :span="8">
          <NewCard title="派工日历">
            <div class="index-calendar">
              <el-calendar v-model="value">
                <template slot="dateCell" slot-scope="{ date, data }">
                  <p
                    :class="estState(date, data)"
                    @click="clickCale(date, $event, data)"
                    @dblclick="dbHoli(date, $event, data)"
                  >
                    <!-- {{ data.day.split('-').slice(2).join('-') }} -->
                    {{ getDay(date) }}
                  </p>
                </template>
              </el-calendar>
              <div class="rlExplain">
                <p>
                  <i class="blueCircle"></i
                  ><i class="redCircle"></i>蓝色代表可派工，红色代表请假(单击)
                </p>
                <p>
                  <i class="yellowCircle"></i
                  ><i class="grayCircle"></i>黄色代表调休，灰色代表周末(双击)
                </p>
                <p style="padding-left: 35px">灰色代表休息</p>
              </div>
            </div>
          </NewCard>
        </el-col>
      </el-row>
    </div>
  </main>
</template>

<script>
import {
  getCalendarListApi,
  getCalendarEditApi,
  getCalendarAddApi,
} from "@/wss/newApi_3-24/work/calendar.js";
import { getExpertListApi } from "@/wss/newApi_3-24/work/expert.js";
import NewCard from "../../../components/newCard.vue";
import { throttle } from "@/wss/utils/wss.js";
import { getExpertExpertRosterApi } from "@/wss/newApi_3-24/work/expert.js";
import { putEditorRuleEditApi } from "@/wss/newApi_3-24/assess/editorRule.js";

export function isPositiveNum(s) {
  var re = /^(0|[1-9]d*)$/;
  return re.test(s);
}
export default {
  name: "editCalendar",
  components: { NewCard },
  data() {
    return {
      // 查询专家参数列表
      getExpertParams: {
        name: "",
        status: 0,
        editorType: "",
      },
      clickTimer: null,
      calendarParams: {
        userId: "",
        expertId: "",
      },
      //当前专家的ip
      expertId: "",
      expertList: [],
      titileArr: [
        { name: "法律", value: 1 },
        // 法律
        { name: "问答", value: 2 },
        //  问答
        { name: "头条", value: 3 },
        // 头条
        { name: "合同", value: 4 },
        //  合同
      ],
      calendarList: [],
      value: new Date(),
      //默认激活第一个
      activeMenu: "1",
      activeList: "1",
      //名单计数百分比
      // listNumName:[
      //     {name:'张三',num:0,index:1,numMax:100},
      //     {name:'李四',num:0,index:2,numMax:100},
      //     {name:'王五',num:0,index:3,numMax:100},
      //     {name:'赵六',num:0,index:4,numMax:100},
      //     {name:'张三',num:0,index:5,numMax:100},
      // ],
      isDouble: false,
      //表格高亮
      highlight: true,
      //表格自动撑开
      fit: false,
      //自适应表格高度
      tableHeight: 0,
      listNumName: [
        { index: 1, name: "张三", jsValue: 18, asLimit: 21 },
        { index: 2, name: "李四", jsValue: 30, asLimit: 35 },
        { index: 3, name: "王五", jsValue: 20, asLimit: 17 },
        { index: 4, name: "赵六", jsValue: 8, asLimit: 15 },
        { index: 5, name: "张三", jsValue: 12, asLimit: 9 },
      ],
      searchExpert: "",
      //日历激活状态
      stateCalendar: 1, //1蓝色 或者 不选中 2红色休假 红色底白字 3灰色底
      holiday: false, //是否休假
    };
  },
  methods: {
    // 失去焦点函数
    async editExpertFn(row, paixv) {
      const { quota, sort, target } = this.currentEdititem;
      // 没发生改变直接退出
      if (row.quota == quota && sort == row.sort && target == row.target) {
        return;
      }
      let currentRow = JSON.parse(JSON.stringify(row));
      // 修改sort字段时再传递过去
      if (!paixv) currentRow.sort = null;

      let { code, msg } = await putEditorRuleEditApi(currentRow);
      if (code != 200) return;
      this.$message({
        type: "success",
        message: msg,
      });
    },
    // 搜索专家
    async searchExpertFn() {
      const _this = this;
      _this.getExpertParams.name = _this.searchExpert;
      await _this.getExpertFn();
    },
    //标注今天日期
    getDay(data) {
      return data.getDate();
    },
    //初始化周末为灰色底 是否休假
    estState(date, data) {
      let flag = this.calendarList.find((item) => {
        // console.log(item.calendarDate == currentDate);
        // console.log(item.calendarDate);
        if (item.calendarDate == data.day) {
          data.id = item.id;
          return true;
        }
      });

      if (flag?.status == 1) {
        return "bg-work";
      } else if (flag?.status == 2) {
        return "bg-festival";
      } else if (flag?.status == 3) {
        return "bg-holiday";
      } else if (flag?.status == 4) {
        return "bg-dayOff";
      } else if (date.getDay() === 6 || date.getDay() === 0) {
        return "bg-week";
        // 没有id就是没有安排的
      } else if (!data.id) {
        // return "bg-unArrange";
      }
      // console.log(date.getDay());
      // if (date.getDay() === 6 || date.getDay() === 0) {
      //   // console.log('bg-week');
      //   return "bg-week";
      // }
      // if (this.holiday === true) {
      //   return "bg-holiday";
      // }
    },
    //单击日历选中状态
    async clickCale(date, e, data) {
      // 没有选择专家点击日历直接退出
      if (!this.expertId) return;

      setTimeout(async () => {
        // 是双击直接退出
        if (this.isDouble) return;

        // 修改
        if (data.id) {
          let editItem = this.getEditItem(data);
          let calendarParams = JSON.parse(JSON.stringify(this.calendarParams));
          // 直接复制引用地址
          calendarParams = editItem;
          calendarParams.calendarDate = data.day;
          calendarParams.expertId = this.expertId;
          let classList = e.target.classList;

          if (
            classList.contains("bg-holiday") ||
            classList.contains("bg-dayOff")
          ) {
            calendarParams.status = 1;
          } else {
            calendarParams.status = 3;
          }
          this.getCalendarEditFn(calendarParams);
          // 添加
        } else {
          let { code, msg } = await getCalendarAddApi({
            expertId: this.expertId,
            calendarDate: data.day,
            status: 1,
          });
          if (code != 200) return;
          this.getCalendarListFn();
        }
      }, 1000);
    },
    // 新增
    getCalendarAddApi() {},
    // 修改
    async getCalendarEditFn(calendarParams) {
      let { code, msg } = await getCalendarEditApi(calendarParams);
      console.log(msg);
      if (code != 200) {
        this.$message({
          type: "warming",
          message: msg,
        });
      }
    },
    // 获取当前编辑的哪一项
    getEditItem(data) {
      return this.calendarList.find((item) => {
        return item.id == data.id;
      });
    },
    //双击日历改为休假状态
    async dbHoli(date, e, data) {
      // 没有选择专家点击日历直接退出
      if (!this.expertId) return;
      this.isDouble = true;
      let editItem = this.getEditItem(data);

      let calendarParams = JSON.parse(JSON.stringify(this.calendarParams));
      calendarParams = editItem;
      if (editItem) {
        let status = calendarParams.status;
        calendarParams.expertId = this.expertId;
        calendarParams.calendarDate = data.day;
        // let classList = e.target.classList;

        if (status == 4) {
          calendarParams.status = 2;
        } else {
          calendarParams.status = 4;
          //  calendarParams.status = 4;
          // calendarParams.status = 3;
        }

        this.getCalendarEditFn(calendarParams);
      } else {
        let { code, msg } = await getCalendarAddApi({
          expertId: this.expertId,
          calendarDate: data.day,
          status: 2,
        });
        if (code != 200) return;
        this.getCalendarListFn();
      }
      setTimeout(() => {
        this.isDouble = false;
      }, 1000);
    },
    selectExpert(row) {
      console.log(row);
      this.calendarParams.expertId = row.id;
      this.calendarList = [];
      this.expertId = row.id;
      this.getCalendarListFn();
    },
    // 获取当前行数
    getcurrent(item) {
      this.currentEdititem = JSON.parse(JSON.stringify(item));
    },
    // 根据类型获取专家
    async getExpertFn(item) {
      const _this = this;
      const getExpertParams = _this.getExpertParams;
      // getExpertParams.editorType = item.value;

      // _this.calendarList = [];
      let { code, data } = await getExpertExpertRosterApi(getExpertParams);

      if (code != 200) return;

      _this.expertList = JSON.parse(JSON.stringify(data));
    },
    // 获取日历类型
    async getCalendarListFn() {
      let { all, user } = await getCalendarListApi(this.calendarParams);

      this.calendarList = JSON.parse(JSON.stringify(user));
    },
    myOnresize() {
      const self = this;
      self.tableHeight =
        window.innerHeight - self.$refs.table.$el.offsetTop - 130;
    },
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.myOnresize);
  },
  mounted() {
    this.getConsultTypeListFn();
    //table固定表头，在mounted生命周期中，改变tableHeight的值，来让表格的高度自适应
    this.$nextTick(function () {
      this.tableHeight =
        window.innerHeight - this.$refs.table.$el.offsetTop - 130;
      // 监听窗口大小变化

      window.addEventListener("resize", this.myOnresize);
      // this.tableHeight =
      //   window.innerHeight - this.$refs.table.$el.offsetTop - 130;
      // // 监听窗口大小变化
      // let self = this;

      // window.onresize = function () {5
      //   // console.log(self);
      //   self.tableHeight =
      //     window.innerHeight - self.$refs.table.$el.offsetTop - 130;
      // };
    });
  },
};
</script>

<style scoped>
.label-box-content {
  height: 100%;
}
.el-input-number--mini {
  width: 100px;
}
.el-card >>> .top {
  border-bottom: 0;
  padding-top: 0;
}
.el-card >>> .el-card__body {
  position: relative;
  height: 100%;
}
.el-card >>> .el-card__body > div {
  padding-top: 0 !important;
  height: 92%;
  overflow-y: auto;
}
.corrExpert .el-card >>> .el-card__body > div {
  overflow-y: initial;
}

.el-row,
.el-card {
  height: 100%;
  margin-bottom: 0;
}
.label-box-content >>> h1 {
  margin: 0;
  padding: 20px 0 15px 0;
  border-bottom: 1px solid #e6ebf5;
}
.label-box-content >>> .top::after {
  height: 0;
}

/* 右侧菜单样式 */
.el-menu {
  border-right: 0;
  margin-top: 15px;
}
.el-menu .typeRes {
  display: flex;
  justify-content: space-between;
  color: #515a6e;
  height: 40px;
  line-height: 40px;
  font-size: 13px;
  margin: 6px 0;
  font-weight: bold;
  background-color: #f8f8f8;
}
.el-menu-item {
  height: 44px;
  line-height: 44px;
}
.el-menu-item.is-active {
  background-color: #1890ff;
  color: #fff;
}
.el-menu-item > span {
  display: flex;
  justify-content: space-between;
  align-content: center;
}
.el-menu-item .el-input-number--mini {
  position: relative;
  margin-top: 8px;
  background-color: #f2f2f2;
}
.el-menu-item .el-input-number--mini::after {
  content: "%";
  position: absolute;
  right: -13px;
  top: 2px;
  color: #ccc;
}
.addUp span {
  display: inline-block;
  color: #1890ff;
}
/* 右侧菜单样式end */

/* 中间带搜索表格 */
.el-card__body {
}
.el-table >>> .cell {
  text-align: center;
}
.el-table >>> .el-input--medium .el-input__inner {
  height: 30px;
  line-height: 30px;
  padding: 0;
  text-align: center;
}
.el-table >>> tr {
  border-radius: 4px;
  overflow: hidden;
}
.centerTable .centerSearch {
  position: absolute;
  right: 20px;
  top: 10px;
  z-index: 9;
}
.el-table >>> table {
  width: 100% !important;
  table-layout: fixed !important;
}
.el-table >>> .el-table__body tr.current-row > td {
  background-color: #1890ff;
  color: #fff;
}
.el-table >>> .el-table__header-wrapper {
  margin: 6px 0;
}
.el-table >>> .el-table__header-wrapper th,
.el-table >>> .el-table__fixed-header-wrapper th {
  background-color: #f8f8f8 !important;
  padding: 0;
}
.el-table >>> th.is-leaf,
.el-table >>> td {
  border-bottom: 0;
  padding: 7px 0;
}
.el-table >>> th.is-leaf {
  padding: 4px 0;
}
.el-table--scrollable-x .el-table__body-wrapper {
}
.el-table::before {
  height: 0;
}
/* 中间带搜索表格end */

/* 派工日历 样式 */
.rlExplain {
  font-size: 12px;
}
.rlExplain p {
  display: flex;
  align-items: center;
  margin: 0;
}
.rlExplain i {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #f2f2f2;
  margin-left: 5px;
  margin-right: 3px;
}
.rlExplain i.blueCircle {
  background-color: #409eff;
}
.rlExplain i.grayCircle {
  background-color: gray;
}
.rlExplain i.yellowCircle {
  background-color: yellow;
}
.rlExplain i.redCircle {
  background-color: #f56c6c;
}
.index-calendar >>> .el-calendar__header {
  display: flex;
  flex-wrap: wrap;
  padding: 20px 0px 0 0;
  border-bottom: 0;
}
.index-calendar >>> .el-button--mini {
  padding: 7px;
}
.index-calendar >>> .el-calendar__body {
  padding: 12px 0px;
}
.index-calendar >>> .el-calendar__header > .el-calendar__title {
  width: 35%;
}
.index-calendar >>> .el-calendar__header > .el-calendar__button-group {
  width: 55%;
}
.index-calendar >>> .el-calendar__header .el-calendar__button-group {
  display: flex;
  justify-content: flex-end;
}

.index-calendar >>> .el-calendar-table tr td:first-child,
.index-calendar >>> .el-calendar-table td {
  border: 0;
}

.index-calendar >>> .el-calendar-table td.is-selected {
  background-color: #fff;
}

.index-calendar >>> .el-calendar-table .el-calendar-day {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 65px;
  padding: 0;
  position: relative;
}

.index-calendar >>> .el-calendar-table .el-calendar-day:hover {
  background-color: #fff;
}
.backlog {
  position: absolute;
  top: 4.75%;
  left: 80px;
  display: block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #f56c6c;
  color: #fff;
  border-radius: 50%;
  font-size: 13px;
}

.index-calendar >>> .el-calendar-table td .el-calendar-day p {
  display: block;
  width: 35px;
  height: 35px;
  text-align: center;
  line-height: 35px;
  background-color: #fff;
  border-radius: 50%;
  border: 1px solid #fff;
}

.index-calendar >>> .el-calendar-table td .el-calendar-day p:hover {
  background-color: #f2f8fe;
}

.index-calendar >>> .el-calendar-table td .el-calendar-day p.bg-week {
  background-color: #f2f2f2;
}

.index-calendar >>> .el-calendar-table td.is-today .el-calendar-day p {
  border: 1px solid #409eff;
}

.index-calendar >>> .el-calendar-table td.is-selected .el-calendar-day p {
  color: #fff;
  background-color: #409eff;
}
.index-calendar >>> .el-calendar-table td .el-calendar-day p.bg-work {
  color: #fff;
  background-color: #409eff;
}
.index-calendar >>> .el-calendar-table td .el-calendar-day p.bg-dayOff {
  color: #fff;
  background-color: yellow;
}
.index-calendar >>> .el-calendar-table td .el-calendar-day p.bg-festival {
  position: relative;
}
.index-calendar
  >>> .el-calendar-table
  td
  .el-calendar-day
  p.bg-festival::after {
  display: block;
  font-size: 11px;
  content: "休";
  top: -10px;
  color: black;
  right: 0px;
  position: absolute;
}
.index-calendar >>> .el-calendar-table td .el-calendar-day p.bg-holiday {
  background-color: #f56c6c;
  border-color: #f56c6c;
  color: #fff;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

/* 派工日历 end*/
</style>